<template>
  <div ref="echarts"
       :style="`width: 100%;height:${height}`">
  </div>
</template>

<script>
const echarts = require("echarts");
export default {
  name: "index",
  props: {
    option: {
      type: Object,
      required: true,
    },
    height: {
      type: String,
      default: '400px',
    }
  },
  beforeDestroy() {
     this.$bus.$off('resize')
  },
  data() {
    return {}
  },
  mounted() {
    this.$bus.$on('resize',()=>{
      setTimeout(()=>{
        this.resize()
      },300)
    })
    this.init()
    window.addEventListener('resize', this.resize)
  },
  methods: {
    init() {
      this.el = echarts.init(this.$refs.echarts);
      this.el.setOption(this.option)

    },
    resize() {
      this.el.resize({
        animation: {
          delay: 200,
          duration: 400
        }
      })
    }
  }
}
</script>

<style scoped>

</style>